<style>
    .demo-tabs-style1 > .ivu-tabs-card > .ivu-tabs-content {
        height:auto;
        margin-top: -16px;
 
    }

    .demo-tabs-style1 > .ivu-tabs-card > .ivu-tabs-content > .ivu-tabs-tabpane {
        background: #fff;
        padding: 16px;
    }

    .demo-tabs-style1 > .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab {
        border-color: transparent;
    }

    .demo-tabs-style1 > .ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active {
        border-color: #fff;
    }
    .demo-tabs-style2 > .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab{
        border-radius: 0;
        background: #fff;
    }
    .demo-tabs-style2 > .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active{
        border-top: 1px solid #3399ff;
    }
    .demo-tabs-style2 > .ivu-tabs.ivu-tabs-card > .ivu-tabs-bar .ivu-tabs-tab-active:before{
        content: '';
        display: block;
        width: 100%;
        height: 1px;
        background: #3399ff;
        position: absolute;
        top: 0;
        left: 0;
    }

</style>
<template>
<div>
      <Button type="success" icon="plus" @click="modal2 = true" >新增</Button>
      <Button type="error" icon="close" @click="removes">删除</Button>
      <Input placeholder="Enter something..." style="width: 200px" v-model='nsearch'></Input> 
      <Button type="primary" shape="circle" icon="ios-search" @click="Search"></Button>
      <Modal
        v-model="modal2"
        title="用户添加"
        @on-ok="ok"
        @on-cancel="cancel"
        >
        <Form label-position="top" ref="formValidate" :model="formValidate">
            <FormItem label="日期" prop="data">
                <Input type="text" v-model="formValidate.data"></Input>
            </FormItem>
            <FormItem label="作者" prop="name">
                <Input type="text" v-model="formValidate.name"></Input>
            </FormItem>
            <FormItem label="标题" prop="global">
                <Input v-model="formValidate.global" type="text" :rows="4"></Input>
            </FormItem>
             <FormItem label="内容" prop="content">
                <Input v-model="formValidate.content" type="textarea" :rows="4"></Input>
            </FormItem>
            <FormItem>
                  <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
                  <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
              </FormItem>
        </Form>
    </Modal>
    <Modal
        v-model="modal1"
        title="用户编辑"
        @on-ok="ok"
        @on-cancel="cancel"
        v-for="(data,key) in data1"
        >
        <Form label-position="top">
            <FormItem label="日期">
                <Input type="text" v-model="data1[num].data">data</Input>
                <span>data1.key</span>
            </FormItem>
            <FormItem label="作者">
                <Input type="text" v-model="data1[num].name"></Input>
            </FormItem>
            
            <FormItem label="标题">
                <Input v-model="data1[num].global" type="text" :rows="4"></Input>
            </FormItem>
            <FormItem label="内容">
                <Input v-model="data1[num].content" type="textarea" :rows="4"></Input>
            </FormItem>
            <FormItem>
                  <Button type="primary" @click="updata(data1[num])">提交</Button>
                  <Button type="ghost" @click="handleReset(data1[num])" style="margin-left: 8px">重置</Button>
              </FormItem>
        </Form>
    </Modal>
    <Row :gutter="32">
        <Col span="12" class="demo-tabs-style1" style="background: #e3e8ee;padding:16px;width:100%;">
            <Tabs  type="card" v-model="value" @on-click='changtype(value)'>
                <TabPane label="娱乐新闻"  name=1> <Table border :columns="columns5" :data="data1"  @on-selection-change="onSelectionChange"></Table></TabPane>
                <TabPane label="体育新闻"  name=2> <Table border :columns="columns5" :data="data1"  @on-selection-change="onSelectionChange" ></Table></TabPane>
                <TabPane label="国际新闻"  name=3> <Table border :columns="columns5" :data="data1"  @on-selection-change="onSelectionChange" ></Table></TabPane>
                
            </Tabs>
            
        </Col>          
    </Row>  
    </div>
</template>
<script>
import Base from '../common/Base';
  export default {
      mixins:[Base],
        data () {
            return {
                value:null,
                page:null,
                limit:10,
                type:1,
                modal3:'news',
                columns5: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '日期',
                        key: 'date',
                        sortable: true
                    },
                    {
                        title: '作者',
                        key: 'name',
                          render: (h, params) => {
                            return h('div', [
                                h('Icon', {
                                    props: {
                                        type: 'person'
                                    }
                                }),
                                h('strong', params.row.name)
                            ]);
                        }
                    },
                   {
                      title:'标题',
                      key:'global'
                   },
                    {
                        title: '内容',
                        key: 'content'
                    },
                     {
                        title: 'Action',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            //this.show(params.index)
                                             this.num=params.index
                                            this.modal1 = true;
                                        }
                                    }
                                }, '编辑'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params)
                                        }
                                    }
                                }, 'Delete')
                            ]);
                        }
                    }
                ],
                  formValidate: {
                    data:'',
                    name: '',
                    global: '',                
                    content: '',
                    value:1
                   
                },
 
            }
        },
        methods: {
        //       getData(){
        //     this.$http({
        //       method:'post',
        //       data:{
        //           page:this.page,
        //             limit:this.limit
        //       },
        //       url:`http://10.31.153.25:3000/${this.modal3}/list`
        //     })
        //     .then((response) => {
              
        //       this.data1 = response.data.docs;
        //       this.data.total = response.data.total
        //       console.log(this.data1)
        //     })
        //   },
        getData(obj){
            if(obj){
                this.$http({
                    method:'post',
                    data:{
                        name:obj
                    },
                    url:`http://10.31.153.25:3000/news/list`,
                }).then((response)=>{
                    // this.data1=response.data.docs;
                    // this.data.total=response.data.total;
                    // this.data.page=response.data.page;
                    const data=JSON.parse(JSON.stringify(response))
                    const resultArray = [];
    				for(let key in data){
    					resultArray.push(data[key]);
                    };
                    this.data1=[]
                    console.log(this.type)
                    for(let i=0;i<resultArray[0].docs.length;i++){
                        console.log(resultArray[0].docs[i].value)
                        if(resultArray[0].docs[i].value== this.type){
                            this.data1.push(resultArray[0].docs[i]);
                            console.log(this.data1)
                        }
                    }
                })
            }else{
                this.$http.post("http://10.31.153.25:3000/news/list")
              .then((response) => {
                    const data=JSON.parse(JSON.stringify(response))
                    const resultArray = [];
    				for(let key in data){
    					resultArray.push(data[key]);
                    };
                    this.data1=[]
                    console.log(this.type)
                    for(let i=0;i<resultArray[0].docs.length;i++){
                        console.log(resultArray[0].docs[i].value)
                        if(resultArray[0].docs[i].value== this.type){
                            this.data1.push(resultArray[0].docs[i]);
                            console.log(this.data1)
                        }
                    }
              })
            }
          },
            show (index) {
              console.log(index)
                this.$Modal.info({
                    title: 'User Info',
                    content: `Data${this.data1[index].data}<br>Name：${this.data1[index].name}<br>Global${this.data1[index].global}<br>Content${this.data1[index].content}`
                })
            }  ,
             changtype(type){
                 
                this.page=type;
                this.type=type
               console.log(this.type);
               this.getData();
            }      
        },
        
    }
</script>
<style>
    .ivu-modal .ivu-modal-content .ivu-modal-footer{
        display: none;
    }
</style>


